<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员管理</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/caidanlan.css">
    <!-- <link rel="stylesheet" href="../css/shouye.css"> -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/Prompt_box.css">
    <script src="../javaScript/data_management.js"></script>
    <script src="../javaScript/utl.js"></script>
    <script src="../javaScript/quanxianpanduan.js"></script> 
    <style>
        .dropdown {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 20px;
        }
        
        .tableStyle {
            margin-top: 20px;
            padding: 0 20px;
        }
        
        #myAlert {
            position: fixed;
            width: 50%;
            left: 25%;
            z-index: 2;
            top: 1%;
        }
    </style>
</head>

<body>
    <div class="container-fulid">
        <div class="row shouhang">
          <span class="iconfont icon-ziliaoku"></span>
          <p>图书馆后台管理系统</p>
          <div id='yonghu'>
        </div>
        </div>
        <div class="row">
            <div class="col-md-2 caidan qingneibian">
                <a href="../html/jueseguanli.html">
                <p> 角色管理</p>
                </a>
                <a href="../html/guanliyuanguanli.html">
                <p>管理员管理</p>
                </a>
                <a href="./quanxianguanli.html">
                <p>权限管理</p>
                </a>
                <a href="../html/ReaderUser.html">
                <p>读者用户</p>
                </a>
                <a href="../html/duzhejuese.html">
                <p>读者角色</p>
                </a>
                <a href="../html/yuedu.html">
                <p>借阅查询</p>
                </a>
                <a href="../html/jieyueguanli.html">
                <p>借阅管理</p>
                </a>
                <a href="../html/book-management.html">
                <p>书刊管理</p>
                </a>
                <a href="../html/guancangdizhi.html">
                <p>馆藏地址管理</p>
                </a>
                <a href="../html/guancangfenlei.html">
                <p>馆藏分类管理</p>
                </a>
                <a href="../html/cengjiaLabel.html">
                <p>层架标签配置</p>
                </a>
                <a href="../html/fenguanshezhi.html">
                <p>分馆配置</p>
                </a>
                <a href="../html/book_inventory.html">
                <p>图书盘点</p>
                </a>
                <a href="../html/dindanguanli.html">
                <p>订单管理</p>
                </a>
                <a href="../html/tushuguanshezi.html">
                <p>图书馆设置</p>
                </a>
            </div>
            <div class="col-md-10 qingneibian" id="shuju">
                <div id="modal-header">
                    <div class="col-md-10 qingneibian">
                        <div style="padding-top: 35px;padding-left: 3%;"> 首页 <span style="margin: 0 1px;">></span> 管理员管理</div>
                        <!-- <div class="row" style="width: 1408.89px;height: 55px; padding-top: 18px;">
                            <div class="col-md-1 qingneibian" style="margin-left: 1%;">
                                <div onclick="xianshi()" style="  cursor: pointer; width: 65px;
                    height: 31px;background-color: rgb(253,189,4); line-height: 31px; text-align: center; border-radius: 6px; ">+ 新增</div>
                            </div>
                            <div class="col-md-3 col-md-offset-7">
                                <div style=" width: 53px; float: right;line-height: 31px;text-align: center; border-radius: 1px; background-color: rgb(253,189,4); ">查询</div>
                                <input style="float: right; height: 31px; " type="text" placeholder="请输入查询的内容">
                            </div>
                        </div> -->
                        <div class="dropdown">
                            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="addOrUpdate(1)">
                                <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                            </button>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入查询的内容" aria-describedby="basic-addon2">
                                <span class="input-group-addon" id="basic-addon2">搜索</span>
                            </div>

                        </div>
                        <div class="tableStyle">
                            <div>
                                <table class="table">
                                    <thead>
                                        <tr id="tableThBox">
                                        </tr>
                                    </thead>
                                    <tbody id="tableTrBox">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--modal-->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                            </button>
                                        <div id="exampleModalLabel"></div>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*角色名:</label>
                                                <input type="text" class="form-control" id="recipient-name">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*押金:</label>
                                                <input type="text" class="form-control" id="deposit">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*可借数量:</label>
                                                <input type="text" class="form-control" id="borrow-number">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*可借天数:</label>
                                                <input type="text" class="form-control" id="borrow-day">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*续借次数:</label>
                                                <input type="text" class="form-control" id="renew-number">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*'逾期租金/本:</label>
                                                <input type="text" class="form-control" id="overdue-rent">
                                            </div>
                                            <div class="form-group">
                                                <label for="recipient-name" class="control-label">*有效时间/天:</label>
                                                <input type="text" class="form-control" id="Valid-time">
                                            </div>
                                            <div class="form-group">
                                                <label for="message-text" class="control-label">创建时间:</label>
                                                <input class="form-control" id="message-text"></input>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reset()">取消</button>
                                        <button type="button" class="btn btn-primary" onclick="submit()">确定</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    let guanliname=glqx('管理员管理')
    let title = ''
    let type = ''
    let updateId = ''
    let header = ['角色名', '押金', '可借数量', "可借天数", '续借次数', '逾期租金/本', '有效时间/天', '创建时间', '操作', ]
    let data = [{
            role: "普通用户",
            money: "100",
            borrowAmount: "1",
            borrowDays: "10",
            RenewNumber: "10",
            overdueRent: "10",
            ValidTime: "10",
            createTime: "2021-12-13",
            id: 1
        }, {
            role: "高级用户",
            money: "100",
            borrowAmount: "1",
            borrowDays: "10",
            RenewNumber: "10",
            overdueRent: "10",
            ValidTime: "100",
            createTime: "2021-12-13",
            id: 2
        }, {
            role: "VIP用户",
            money: "100",
            borrowAmount: "1",
            borrowDays: "10",
            RenewNumber: "10",
            overdueRent: "10",
            ValidTime: "1000",
            createTime: "2021-12-13",
            id: 3
        }, {
            role: "SVIP用户",
            money: "100",
            borrowAmount: "1",
            borrowDays: "10",
            RenewNumber: "10",
            overdueRent: "10",
            ValidTime: "10000",
            createTime: "2021-12-13",
            id: 4
        }, ]
        //  渲染表单头部方法
    function tableThBox() {
        let thHtml = ''
        header.forEach(item => {
            thHtml += `<th>${item}</th>`
        })
        return thHtml
    }
    //渲染表单主体方法
    function tableTrBox() {
        let trHtml = ''
        data.forEach((item, index) => {
            trHtml += `<tr>
                            <td>${item.role}</td>
                            <td>${item. money}</td>
                            <td>${item.borrowAmount}</td>
                            <td>${item. borrowDays}</td>
                            <td>${item.RenewNumber}</td>
                            <td>${item. overdueRent}</td>
                            <td>${item. ValidTime}</td>
                            <td>${item. createTime}</td>                          
                            <td style="width: 20%">
                                <div  class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" onclick="addOrUpdate(${2},${index},${item.id})">编辑</button>
  </div>

  <div class="btn-group" role="group">
    <button type="button"  onclick="dele(${item.id})"  class="btn btn-default">删除</button>
  </div>
</div>
                            </td>
                       </tr>`
        })
        return trHtml
    }
    //方法
    //删除
    function dele(id) {
        if(czqx(guanliname,'删除')){
            return
        }
        for (let i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                $('#tableTrBox').children().eq(i).remove()
                data.splice(i, 1)
            }
        }

    }

    function addOrUpdate(num, index, id) {
        if(czqx(guanliname,'新增')){
            return
        }
        type = num
        title = num === 1 ? "新增角色" : "编辑角色";
        document.getElementById("exampleModalLabel").innerHTML = title
        $('#exampleModal').modal("show")
        if (num === 2) {
            let obj = data[index]
            $('#recipient-name').val(obj.role)
            $('#message-text').val(obj.roleRemark)
            updateId = id
            if (obj.state == 1) {
                $('.formInput')[0].checked = true
                $('.formInput')[1].checked = false
            } else {
                $('.formInput')[0].checked = false
                $('.formInput')[1].checked = true
            }
        }
    }
    //清空方法
    function reset() {
        $('#recipient-name').val('')
        $('#message-text').val('')
        $('#deposit').val('')
        $('#borrow-number').val('')
        $('#borrow-day').val('')
        $('#renew-number').val('')
        $('#overdue-rent').val('')
        $('#Valid-time').val('')
            // $('.formInput')[0].checked = true
            // $('.formInput')[1].checked = false
    }
    //获取当前时间方法
    function getNowFormatDate() {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    //确定方法
    function submit() {
        $('#recipient-name').val()
        $('#deposit').val()
        $('#borrow-number').val()
        $('#borrow-day').val()
        $('#renew-number').val()
        $('#overdue-rent').val()
        $('#Valid-time').val()
        $('#message-text').val()

        let obj = {
            "role": $('#recipient-name').val(),
            "money": $('#deposit').val(),
            "borrowAmount": $('#borrow-number').val(),
            "borrowDays": $('#borrow-day').val(),
            "RenewNumber": $('#renew-number').val(),
            "overdueRent": $('#overdue-rent').val(),
            "ValidTime": $('#Valid-time').val(),
            "createTime": $('#message-text').val(),

        }
        data.push(obj)
        console.log(obj)
        tableTrBox()
    }

    function addMessage(type, message) {
        /*
         * type=1 成功
         * */
        let messageType = ''
        if (type == 1) messageType = "alert alert-success "
        $('#modal-header').after(
            `<div id="myAlert" class="${messageType}">
            <a href="#" class="close" data-dismiss="alert">×</a>
            <strong>${message}</strong>
            </div>`
        );
    }

    function clearMessage() {
        setTimeout(function() {
            $('#myAlert').remove();
        }, 1000);
    }

    function creatData() {

        document.getElementById("tableTrBox").innerHTML = tableTrBox()

            // <div id = "zhezhao" 
            // style = " display: none; background-color: rgba(248, 248, 248,0.7); position: absolute; top: 0; left: 0; width:1690px;height:980px ;" ></div>


    }
    
    
    window.onload = function() { 
        document.getElementById("tableThBox").innerHTML = tableThBox() 
        creatData() 
    }

    isLogin()
    yonghu()
    

</script>

</html>